<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  Fold,
  Document,
  House,
  Money,
  Notebook,
  Odometer,
  Service,
  DataBoard
} from '@element-plus/icons-vue'

import{userInfoService} from "@/api/user.js"
import useUserInfoStore from "@/stores/userInfo.js";
const userInfoStore = useUserInfoStore();
const getUserInfo = async () => {
  let result=await userInfoService();
  userInfoStore.setUserInfo(result.data);
}

getUserInfo();
const isAdmin=(userInfoStore.userInfo.usertype===1);
import {ElMessageBox,ElMessage} from "element-plus";
import {useTokenStore} from '@/stores/token.js'
import{useRouter} from 'vue-router';
import { ref } from 'vue';
const router=useRouter()
const tokenStore=useTokenStore();
const isCollapse = ref(false)
const collapseNav = () =>{
  isCollapse.value = !isCollapse.value;
}


const handleCommand=(command)=>{
  if(command==='logout'){
    ElMessageBox.confirm(
        '你确认要退出登录吗?',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          //退出登录
          tokenStore.removeToken()
          userInfoStore.removeUserInfo()

          router.push('/login')
          ElMessage({
            type: 'success',
            message: '退出登陆成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消了退出登录',
          })
        })
  }else{
    router.push('/user/'+command)
  }

}

</script>

<template>
  <el-container class="layout-container">
    <el-header class="header" background-color="#232323">
      <!-- Logo -->
<!--      <el-avatar class="logo" src="src/assets/logo1.png"/>-->
      <img src="../assets/logo1.png" alt="这是干饭队的logo" class="logo"/>
      <!-- 水电费预交费管理系统标题 -->
      <h1 class="site-title">水电费预交费管理系统</h1>
      <p/>
      <!-- 下拉菜单 -->
      <!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->
      <el-dropdown placement="bottom-end" @command="handleCommand">

                    <span class="el-dropdown__box">
                      <strong>你好，{{ userInfoStore.userInfo.realname }}</strong>
                        <el-avatar :src=userInfoStore.userInfo.avatar />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
            <el-dropdown-item command="avatarupdate" :icon="Crop">更换头像</el-dropdown-item>
            <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="collapse">
      <div class="collapse-btn" @click="collapseNav" style="background-color: rgb(96,89,89); width: auto; padding: 0;margin: 0;">
        <el-icon size="40px">
          <Fold />
        </el-icon>
      </div>

      <el-menu class="el-menu-vertical-demo"
        :collapse="isCollapse"
        active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
               router >
        <el-menu-item index="/home">
          <el-icon>
            <House />
          </el-icon>
          <span>主页</span>
        </el-menu-item >
          <el-menu-item index="/user/info">
            <el-icon>
              <User />
            </el-icon>
            <span>个人信息</span>
          </el-menu-item>
          <el-menu-item index="/recharge/records">
            <el-icon>
              <Money />
            </el-icon>
            <span>充值记录</span>
          </el-menu-item>
          <el-menu-item  index="/utility/billinfo" >
            <el-icon>
              <Notebook />
            </el-icon>
            <span>水电费账单</span>
          </el-menu-item>
        <el-menu-item  index="/utility/tieredpayment" >
          <el-icon>
            <DataBoard/>
          </el-icon>
          <span>水电费梯度收费表</span>
        </el-menu-item>
        <el-menu-item index="/announcement?p=1">
          <el-icon>
            <Document/>
          </el-icon>
          <span>公告</span>
        </el-menu-item>
        <el-menu-item v-if="isAdmin" index="/usermanagement">
          <el-icon>
            <Management />
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>

        <el-menu-item index="/cservice?p=1">
          <el-icon>
            <Service />
          </el-icon>
          <span>客户服务</span>
        </el-menu-item >
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <el-main style="overflow: auto">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    //background-color: #232323;
    background-color: #f5f5f5; /* 白色背景 */
    backdrop-filter: blur(10px); /* 添加模糊效果 */
    //width: 200px;
    height: 100vh;

    .el-menu {
      border-right: none;
      /* 叠加两个线性渐变：
     第一个从上到下渐变（灰色到透明），
     第二个从左到右渐变（透明到白色） */
      background:
          linear-gradient(to bottom, rgba(32, 32, 32, 1), rgba(32, 32, 32, 0)),
          linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
      //background: linear-gradient(to bottom, rgb(20, 20, 20), rgb(255, 255, 255)); /* 从下到上的渐变色 */
      backdrop-filter: blur(10px); /* 添加模糊效果 */
    }
  }

  .el-header {
    //background-color:rgb(0, 76, 143);
    //background-image: url('src/assets/header_background.jpg'); /* 替换为你的图片路径 */
    //background-size: cover; /* 使背景图片覆盖整个区域 */
    /* 防止背景图片重复 */
    /* 将图片居中显示 */
    background: linear-gradient(to left, rgb(20, 20, 20), rgb(100, 100, 100)) no-repeat center center;/* 从左到右的渐变色 */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #333; /* 添加下边框 */
    padding-top: 20px; /* 增加顶部内边距 */

    strong { /* 定位到 "你好" 文字 */
      color: #ffffff; /* 设置深蓝色 */
    }

    }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-aside.full-height-menu {
  height: 100%; /* 占满父容器高度 */
  overflow: auto; /* 允许内容滚动 */
  background-color: #f5f5f5; /* 背景 */
  backdrop-filter: blur(10px); /* 添加模糊效果 */
  width: 200px;
}

.el-menu.el-menu-vertical-demo {
  height: 90%; /* 允许菜单根据内容自适应高度 */
  border: none; /* 移除边框 */
}

.full-height-menu {
  height: 100vh; /* 占满视口高度 */
  //overflow: auto; /* 允许内容滚动 */
}

.collapse-btn .el-icon {
  transition: transform 0.3s; /* 平滑过渡 */
}

.header {
  position: relative; /* 相对定位 */
  /* 为logo留出空间 */
  /* 调整内边距以留出空间 */
  padding: 20px 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  //background-image: url('@/assets/background1.jpg'); // 设置背景图
  position: absolute; /* 绝对定位 */
  top: 2px; /*  */
  left: 2px; /*  */
  width: 150px; /* Logo的宽度 */
  height: 60px; /* Logo的高度 */
  border-radius: 0; /* 边框形状 */
}

/* 文字样式 */
.site-title {
  margin: 130px;
  color: #fff; /* 文字颜色，根据背景色调整 */
  font-size: 1.5rem; /* 根据需要调整字体大小 */
  font-weight: bold; /* 加粗文字 */
}

//.el-avatar {
//  width: 100%; /* 头像宽度占容器宽度 */
//  height: auto; /* 高度自适应，保持宽高比 */
//  object-fit: cover; /* 确保图片覆盖整个容器，同时裁剪超出部分 */
//}

.el-avatar {
  width: 50px;           /* 设置固定的宽度 */
  height: 50px;          /* 设置固定的高度 */
}
.el-avatar img {
  width: 100%;           /* 让图片宽度占满容器宽度 */
  height: 100%;          /* 让图片高度占满容器高度 */
  object-fit: cover;     /* 保持宽高比，裁剪超出部分 */
}
</style>